import * as React from "react"
import { View, ViewStyle, TextInput, Image, ImageStyle, TextStyle } from "react-native"
import { px2dp } from "../../utils"
import { icons } from "../../assets/index"
import { InputBankCardProps } from "./inputBankCard.props"
import { color } from "@/theme"

const styleInputView: ViewStyle = {
  backgroundColor: color.backgroundInnerPage,
  height: px2dp(42),
  width: px2dp(311),
  borderRadius: px2dp(4),
  justifyContent: "center",
  paddingHorizontal: px2dp(8),
  marginTop: px2dp(8)
}
const styleInput: TextStyle = {
  flex: 1
}

const styleBackCard: ViewStyle = {
  flexDirection: "row",
  justifyContent: "space-between",
  alignItems: "center"
}

const styleScanCard: ImageStyle = {
  width: px2dp(22),
  height: px2dp(22)
}

export class InputBankCard extends React.Component<InputBankCardProps, {}> {
  state = {
    userName: "",
    backCardNumber: ""
  }

  static defaultProps = {
    showType: "default"
  }

  public render() {
    const { showType, getBankInfoClick, userName, backCard } = this.props
    return (
      <View style={{ alignItems: "center", marginTop: px2dp(20) }}>
        {showType === "userName" || showType === "default" ? (
          <View style={styleInputView}>
            <TextInput
              style={styleInput}
              placeholder={"请输入提款人真实姓名，姓名不可修改"}
              onChangeText={value => {
                // if (value.match(/[^\u4E00-\u9FA5]/g)) {
                //   alert("用户名只能为中文汉字")
                // }
                // this.setState({ userName: value.replace(/[^\u4E00-\u9FA5]/g, "") })
                // getBankInfoClick({ ...this.state })
                this.setState({ userName: value })
                getBankInfoClick({ ...this.state })
              }}
              defaultValue={userName || this.state.userName}
            ></TextInput>
          </View>
        ) : null}
        {showType === "cardNumber" || showType === "default" ? (
          <View style={[styleInputView, styleBackCard]}>
            <TextInput
              style={styleInput}
              placeholder={"请输入跟提款人姓名一致的银行卡号"}
              onChangeText={value => {
                this.setState({ backCardNumber: value })
                getBankInfoClick({ ...this.state })
              }}
              defaultValue={backCard || this.state.backCardNumber}
            ></TextInput>
            <Image source={icons.scanBankCard} style={styleScanCard} />
          </View>
        ) : null}
      </View>
    )
  }
}
